<template>
  <div class="add_news">
    <el-title :title="title"></el-title>
    <div class="news">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="信息标题:" prop="title">
          <el-input type="text" v-model="ruleForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类:" prop="class">
          <el-select v-model="ruleForm.classification" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :class="{ activeTwo: item.level == 1, activethree: item.level == 2 }"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缩略图:" prop="abstract" class="textarea">
          <el-upload class="avatar-uploader" action="/api/project/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传文件:" prop="abstract" class="textarea">
          <el-upload
            class="upload-demo"
            action="/api/project/upload"
            accept=".doc,.docx,.wps,.wpt,.dot,.rtf,.txt,.dotx,.docm"
            :show-file-list="false"
            :on-success="demoSuccess"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-input v-model="demoList"> </el-input>
        </el-form-item>
        <el-form-item label="摘要:" prop="abstract" class="textarea">
          <el-input type="textarea" v-model="ruleForm.abstract"></el-input>
        </el-form-item>
        <el-form-item label="内容:" prop="content" class="textarea">
          <div class="edit_container">
            <quill-editor
              v-model="ruleForm.content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
            >
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="来源:" prop="source" class="textarea">
          <el-input type="text" v-model="ruleForm.source" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import elTitle from '@/components/title'
import { addNew, newclass, optionsList } from '@/utils/index.js'
export default {
  data() {
    return {
      msg: '',
      title: '添加信息',
      ruleForm: {
        title: '',
        classification: '',
        town: '',
        abstract: '',
        content: '',
        source: '',
      },
      rules: {},
      picdata: [],
      // 分类
      optionsd: [],
      options: [],
      imageUrl: '',
      // 文件
      demoList: '',
      demoData: [],
      myConfig: {
        UEDITOR_HOME_URL: '/UEditor/',
        serverUrl: '',
      },
      editorOption: {},
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    },
  },
  components: {
    elTitle,
  },
  created() {
    newclass().then((res) => {
      console.log(res)
      this.optionsd = res.data
    })

    // 获取新闻分类
    optionsList({ type: 'list' }).then((res) => {
      console.log(res)
      this.options = res.data
      // res.data.forEach((item)=>{
      //     this.options.push(item)
      //     if(item.childer != undefined){
      //         item.childer.forEach((item1)=>{
      //             this.options.push(item1)
      //             if(item1.childer != undefined){
      //                 item1.childer.forEach((item2)=>{
      //                     this.options.push(item2)
      //                 })
      //             }
      //         })
      //     }
      // })
      console.log(this.options)
      this.tableData = res.data
    })
  },
  methods: {
    onEditorReady() {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    saveHtml: function () {
      alert(this.content)
    },
    // 子分类
    // classTwo(event){
    //     console.log(event)
    //     newclass().then((res)=>{
    //         let lists = res.data
    //         lists.forEach((item) => {
    //             if(item.id == event){
    //                 this.options = item.child
    //             }
    //         });
    //     })
    // },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addNew({
            title: this.ruleForm.title,
            sort: this.ruleForm.classification,
            pic: this.picdata.src,
            demo: this.demoData.src,
            a_subclass: this.ruleForm.town,
            intro: this.ruleForm.abstract,
            content: this.ruleForm.content,
            source: this.ruleForm.source,
          }).then((res) => {
            if (res.code == '0') {
              this.$message.closeAll()
              this.$message.success('创建完成')
              setTimeout(() => {
                this.$router.push('/news_list')
              }, 800)
            } else {
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.picdata = res.data
    },
    // 上传成功
    demoSuccess(res, file) {
      this.demoList = URL.createObjectURL(file.raw)
      console.log(res)
      this.demoData = res.data
    },
  },
}
</script>

<style lang="scss" scoped>
.news {
  background-color: white;
  margin-top: 15px;
  padding: 50px;
}
.demo-ruleForm::v-deep {
  padding-right: 50px;
  .el-form-item {
    display: inline-block;
    width: 50%;
  }
  .el-select {
    display: inline-block;
    width: 47%;
  }
  .el-textarea textarea {
    min-height: 120px !important;
  }
  .el-select:nth-child(2) {
    float: right;
  }
  .textarea {
    width: 100%;
  }
  .el-form-item:nth-last-child(2) {
    width: 30%;
  }
  .el-form-item:nth-last-child(1) {
    display: block;
  }
  #edui1 {
    width: 100% !important;
  }
  #edui1_iframeholder {
    width: 100% !important;
    height: 280px !important;
  }
  #edui282 {
    width: 100% !important;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.edit_container::v-deep {
  .ql-editor {
    height: 500px !important;
  }
}
.activeTwo {
  margin-left: 30px;
}
.activethree {
  margin-left: 50px;
}
</style>